npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // Voor single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Definieer hier remotes, bijv. 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Voeg hier andere gedeelde dependencies toe
 },
 }),
 // ... andere plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // Voor single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Voeg hier andere 'exposed' modules toe
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Voeg hier andere gedeelde dependencies toe
 },
 }),
 // ... andere plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Uitleg:

• React.lazy(() => import('RemoteApp/Widget')): Dit importeert dynamisch de Widget-module uit de RemoteApp. De naam RemoteApp komt overeen met de naam die is gedefinieerd in de remotes-sectie van de Webpack-configuratie van de host. Widget komt overeen met de modulenaam die is gedefinieerd in de exposes-sectie van de Webpack-configuratie van de remote.
• React.Suspense: Dit wordt gebruikt om het asynchroon laden van de remote module af te handelen. De fallback-prop specificeert een component om weer te geven terwijl de module wordt geladen.

6. Start de Applicaties:

Start zowel de host- als de remote applicaties met npm start (of uw voorkeursmethode). Zorg ervoor dat de remote applicatie draait *voordat* de host-applicatie start.

U zou nu de remote widget moeten zien die binnen de host-applicatie wordt weergegeven.

Geavanceerde Module Federation Technieken

Naast de basisconfiguratie biedt Module Federation verschillende geavanceerde technieken voor het bouwen van geavanceerde micro-frontend architecturen.

1. Versiebeheer en Delen:

Het effectief beheren van gedeelde afhankelijkheden is cruciaal voor het handhaven van stabiliteit en het vermijden van conflicten. Module Federation biedt mechanismen voor het specificeren van versiebereiken en singleton-instanties van gedeelde modules. Met de shared-eigenschap in de Webpack-configuratie kunt u bepalen hoe gedeelde modules worden geladen en beheerd.

Voorbeeld:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Zorgt ervoor dat er slechts één instantie van de module wordt geladen, wat duplicatie voorkomt en de bundelgrootte verkleint. Dit is vooral belangrijk voor bibliotheken zoals React en ReactDOM.
• requiredVersion: Specificeert het versiebereik dat de applicatie vereist. Webpack zal proberen een compatibele versie van de module te laden.
• eager: true: Laadt de module onmiddellijk, in plaats van 'lazy'. Dit kan in sommige gevallen de prestaties verbeteren, maar kan ook de initiële bundelgrootte vergroten.

2. Dynamische Module Federation:

In plaats van de URL's van remote applicaties hard te coderen, kunt u ze dynamisch laden vanuit een configuratiebestand of een API-eindpunt. Dit stelt u in staat om de micro-frontend architectuur bij te werken zonder de host-applicatie opnieuw te implementeren.

Voorbeeld:

Maak een configuratiebestand (bijv. remote-config.json) dat de URL's van de remote applicaties bevat:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

In de host-applicatie, haal het configuratiebestand op en creëer dynamisch het remotes-object:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... andere configuraties
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Fout bij het lezen van remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Fout bij het parsen van remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Voeg hier andere gedeelde dependencies toe
 },
 }),
 // ... andere plugins
 ],
};

            

              
                Copy
              
            
          

Belangrijke Opmerking: Overweeg het gebruik van een robuustere methode voor het ophalen van de remote configuratie in een productieomgeving, zoals een API-eindpunt of een speciale configuratiedienst. Het bovenstaande voorbeeld gebruikt fs.readFile voor de eenvoud, maar dit is over het algemeen niet geschikt voor productie-implementaties.

3. Aangepaste Laadstrategieën:

Module Federation stelt u in staat om aan te passen hoe remote modules worden geladen. U kunt aangepaste laadstrategieën implementeren om de prestaties te optimaliseren of specifieke scenario's af te handelen, zoals het laden van modules vanaf een CDN of het gebruik van een service worker.

Webpack biedt hooks die u in staat stellen om het laadproces van modules te onderscheppen en aan te passen. Dit maakt fijnmazige controle mogelijk over hoe remote modules worden opgehaald en geïnitialiseerd.

4. Omgaan met CSS en Stijlen:

Het delen van CSS en stijlen tussen micro-frontends kan lastig zijn. Module Federation ondersteunt verschillende benaderingen voor het omgaan met stijlen, waaronder:

• CSS Modules: Gebruik CSS Modules om stijlen binnen elke micro-frontend in te kapselen, conflicten te voorkomen en consistentie te waarborgen.
• Styled Components: Gebruik styled components of andere CSS-in-JS-bibliotheken om stijlen binnen de componenten zelf te beheren.
• Globale Stijlen: Laad globale stijlen vanuit een gedeelde bibliotheek of CDN. Wees voorzichtig met deze aanpak, omdat dit tot conflicten kan leiden als stijlen niet correct worden namespaced.

Voorbeeld met CSS Modules:

Configureer Webpack om CSS Modules te gebruiken:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... andere regels
],
}

            

              
                Copy
              
            
          

Importeer CSS Modules in uw componenten:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Communicatie tussen Micro-Frontends:

Micro-frontends moeten vaak met elkaar communiceren om gegevens uit te wisselen of acties te activeren. Er zijn verschillende manieren om dit te bereiken:

• Gedeelde Events: Gebruik een globale event bus om events te publiceren en erop te abonneren. Dit stelt micro-frontends in staat om asynchroon te communiceren zonder directe afhankelijkheden.
• Custom Events: Gebruik custom DOM events voor communicatie tussen micro-frontends op dezelfde pagina.
• Gedeeld State Management: Gebruik een gedeelde state management bibliotheek (bijv. Redux, Zustand) om state te centraliseren en gegevensuitwisseling te vergemakkelijken.
• Directe Module Imports: Als micro-frontends nauw met elkaar zijn gekoppeld, kunt u modules rechtstreeks van elkaar importeren met behulp van Module Federation. Deze aanpak moet echter spaarzaam worden gebruikt om te voorkomen dat er afhankelijkheden ontstaan die de voordelen van micro-frontends ondermijnen.
• API's en Services: Micro-frontends kunnen met elkaar communiceren via API's en services, wat zorgt voor losse koppeling en grotere flexibiliteit. Dit is met name handig wanneer micro-frontends op verschillende domeinen worden geïmplementeerd of verschillende beveiligingseisen hebben.

Voordelen van het Gebruik van Module Federation voor Micro-Frontends

• Verbeterde Schaalbaarheid: Micro-frontends kunnen onafhankelijk worden geschaald, waardoor u middelen kunt toewijzen waar ze het meest nodig zijn.
• Verhoogde Onderhoudbaarheid: Kleinere codebases zijn gemakkelijker te begrijpen en te onderhouden, wat het risico op bugs vermindert en de productiviteit van ontwikkelaars verbetert.
• Snellere Implementatiecycli: Micro-frontends kunnen onafhankelijk worden geïmplementeerd, wat snellere iteratiecycli en snellere release van nieuwe functies mogelijk maakt.
• Technologische Diversiteit: Teams kunnen de technologieën en frameworks kiezen die het beste bij hun behoeften passen, wat innovatie bevordert en het gebruik van gespecialiseerde vaardigheden mogelijk maakt.
• Verbeterde Teamautonomie: Elke micro-frontend is eigendom van een toegewijd team, wat eigenaarschap en verantwoordelijkheid bevordert.
• Vereenvoudigde Onboarding: Nieuwe ontwikkelaars kunnen snel op stoom komen met kleinere, beter beheersbare codebases.

Uitdagingen bij het Gebruik van Module Federation

• Verhoogde Complexiteit: Micro-frontend architecturen kunnen complexer zijn dan traditionele monolithische architecturen, wat zorgvuldige planning en coördinatie vereist.
• Beheer van Gedeelde Afhankelijkheden: Het beheren van gedeelde afhankelijkheden kan een uitdaging zijn, vooral wanneer verschillende micro-frontends verschillende versies van dezelfde bibliotheek gebruiken.
• Communicatie-overhead: Communicatie tussen micro-frontends kan overhead en latentie introduceren.
• Integratietesten: Het testen van de integratie van micro-frontends kan complexer zijn dan het testen van een monolithische applicatie.
• Initiële Setup-overhead: Het configureren van Module Federation en het opzetten van de initiële infrastructuur kan aanzienlijke inspanning vergen.

Praktijkvoorbeelden en Gebruiksscenario's

Module Federation wordt door een groeiend aantal bedrijven gebruikt om grote, complexe webapplicaties te bouwen. Hier zijn enkele praktijkvoorbeelden en gebruiksscenario's:

• E-commerce Platforms: Grote e-commerce platforms gebruiken vaak micro-frontends om verschillende delen van de website te beheren, zoals de productcatalogus, winkelwagen en het afrekenproces. Een Duitse retailer kan bijvoorbeeld een aparte micro-frontend gebruiken voor het weergeven van producten in het Duits, terwijl een Franse retailer een andere micro-frontend gebruikt voor Franse producten, beide geïntegreerd in één host-applicatie.
• Financiële Instellingen: Banken en financiële instellingen gebruiken micro-frontends om complexe bankapplicaties te bouwen, zoals online bankportalen, investeringsplatforms en handelssystemen. Een wereldwijde bank kan teams in verschillende landen hebben die micro-frontends ontwikkelen voor verschillende regio's, elk afgestemd op lokale regelgeving en klantvoorkeuren.
• Content Management Systemen (CMS): CMS-platforms kunnen micro-frontends gebruiken om gebruikers in staat te stellen het uiterlijk en de functionaliteit van hun websites aan te passen. Een Canadees bedrijf dat CMS-diensten levert, kan gebruikers bijvoorbeeld toestaan om verschillende micro-frontends (widgets) toe te voegen of te verwijderen van hun website om de functionaliteit aan te passen.
• Dashboards en Analyseplatforms: Micro-frontends zijn zeer geschikt voor het bouwen van dashboards en analyseplatforms, waar verschillende teams verschillende widgets en visualisaties kunnen bijdragen.
• Zorgtoepassingen: Zorgverleners gebruiken micro-frontends om patiëntenportalen, elektronische patiëntendossiers (EPD) en telegeneeskundeplatforms te bouwen.

Best Practices voor het Implementeren van Module Federation

Volg deze best practices om het succes van uw Module Federation-implementatie te garanderen:

• Plan Zorgvuldig: Voordat u begint, moet u uw micro-frontend architectuur zorgvuldig plannen en duidelijke grenzen definiëren tussen de verschillende applicaties.
• Stel Duidelijke Communicatiekanalen In: Stel duidelijke communicatiekanalen in tussen de teams die verantwoordelijk zijn voor de verschillende micro-frontends.
• Automatiseer de Implementatie: Automatiseer het implementatieproces om ervoor te zorgen dat micro-frontends snel en betrouwbaar kunnen worden geïmplementeerd.
• Monitor de Prestaties: Monitor de prestaties van uw micro-frontend architectuur om eventuele knelpunten te identificeren en aan te pakken.
• Implementeer Robuuste Foutafhandeling: Implementeer robuuste foutafhandeling om cascade-storingen te voorkomen en ervoor te zorgen dat de applicatie veerkrachtig blijft.
• Gebruik een Consistente Codestijl: Handhaaf een consistente codestijl voor alle micro-frontends om de onderhoudbaarheid te verbeteren.
• Documenteer Alles: Documenteer uw architectuur, afhankelijkheden en communicatieprotocollen om ervoor te zorgen dat het systeem goed wordt begrepen en onderhoudbaar is.
• Overweeg Beveiligingsimplicaties: Overweeg zorgvuldig de beveiligingsimplicaties van uw micro-frontend architectuur en implementeer passende beveiligingsmaatregelen. Zorg voor naleving van wereldwijde wetgeving inzake gegevensprivacy zoals AVG en CCPA.

Conclusie

JavaScript Module Federation met Webpack 5 biedt een krachtige en flexibele manier om micro-frontend architecturen te bouwen. Door grote applicaties op te splitsen in kleinere, onafhankelijk implementeerbare eenheden, kunt u de schaalbaarheid, onderhoudbaarheid en teamautonomie verbeteren. Hoewel er uitdagingen zijn verbonden aan het implementeren van micro-frontends, wegen de voordelen vaak op tegen de kosten, vooral voor complexe webapplicaties. Door de best practices in deze gids te volgen, kunt u Module Federation succesvol inzetten om robuuste en schaalbare micro-frontend architecturen te bouwen die voldoen aan de behoeften van uw organisatie en gebruikers wereldwijd.